<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="w-diyForm"
  >
    <div class="topFrom">
      <el-form-item prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item prop="name">
        <el-select v-model="value1" multiple placeholder="请选择">
          <el-option style="display: none"> </el-option>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-select>
      </el-form-item>
    </div>
    <el-form-item class="diyInput" prop="inputValue">
      <div class="diyInput__title">
        <img src="https://picsum.photos/14/14" alt="" />
        技术灵感
      </div>
      <techInput
        v-model="value"
        ref="techInput"
        :suggestList="suggestList"
      ></techInput>
    </el-form-item>
  </el-form>
</template>

<script>
import techInput from "./techInput.vue";
export default {
  props: ["suggestList"],
  components: {
    techInput,
  },
  watch: {
    value: {
      handler(val) {
        console.log(val, "值变化");
        this.ruleForm.inputValue = val
          .replaceAll("<br>", "\n")
          .replace(/&lt;/g, "<")
          .replace(/&gt;/g, ">")
        console.log(this.ruleForm.inputValue, "1111");
        this.$refs.ruleForm.validateField("inputValue");
      },
    },
  },
  data() {
    let validateInputValue = (rule, value, callback) => {
      if (value.trim() === "") {
        this.$refs.techInput.isError = true;
        callback(new Error("为提升查新效果，请至少输入30字符"));
      } else if (value.trim().length < 30) {
        this.$refs.techInput.isError = true;
        callback(new Error("为提升查新效果，请至少输入30字符"));
      } else if (value.trim().length > 4000) {
        this.$refs.techInput.isError = true;
        callback(new Error("最多输入4000个字符"));
      } else {
        this.$refs.techInput.isError = false;
        callback();
      }
    };

    return {
      value: "",
      ruleForm: {
        name: "",
        inputValue: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        inputValue: [{ validator: validateInputValue }],
        value1: [],
        input: "",
      },
    };
  },
  methods: {},
};
</script>
<style scoped lang="less">
.w-diyForm {
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  padding: 14px 12px;
  padding-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /deep/.el-form-item {
    margin-bottom: 0;
  }
  /deep/ .el-form-item__content {
    margin-left: 0 !important;
    line-height: 1 !important;
  }
}
.topFrom {
  display: flex;
}
.diyInput {
  flex: 1;
  min-height: 0;
  width: 100%;
  margin-top: 18px;
  .diyInput__title {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    img {
      width: 14px;
      height: 14px;
      margin-right: 5px;
    }
    font-size: 14px;
    color: #000000;
  }
  /deep/ .el-form-item__content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
</style>
